<template>
  <ckeditor
    style="min-height: 200px; max-height: 620px; border: 1px solid #ccc;"
    :editor="editor"
    @ready="onReady"
    @input="handleEditorDataChange"
    :value="editorData"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
    /**
     * CKEditor文档版
     * 文档参考：https://www.jianshu.com/p/9b4374e603f3
     * 1、安装包：tyarn add  @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-inline
     * 2、import CkInlineEditor from '@/components/Editor/CkInlineEditor'
     * 3、components组件中加上CkInlineEditor
     * 4、指定位置放入：<ck-inline-editor v-model="content"></ck-inline-editor>
     */
    import CKEditor from '@ckeditor/ckeditor5-vue2'
    import InlineEditor from '@ckeditor/ckeditor5-build-inline'
    import '@ckeditor/ckeditor5-build-inline/build/translations/zh-cn'
    import UploadAdapter from './UploadAdapter'

    export default {
        name: 'CkInlineEditor',
        props: {
            // eslint-disable-next-line vue/require-default-prop
            value: {
                type: String
            },
            placeholder: {
                type: String,
                default: '请输入内容'
            }
        },
        watch: {
          value (newVal) {
            this.editorData = newVal
          },
          editorData (newVal) {
            this.$emit('input', newVal)
            // 向父组件更新
            this.$emit('change', newVal)
          }
        },
        data () {
            return {
                editor: InlineEditor,
                editorData: '',
                editorConfig: {
                    // 可以控制编辑器的提示文本
                    placeholder: this.placeholder,
                    language: 'zh-cn',
                    fontSize: {
                        options: [8, 10, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 32, 48]
                    },
                    fontFamily: {
                        options: ['宋体', '仿宋', '微软雅黑', '黑体', '仿宋_GB2312', '楷体', '隶书', '幼圆']
                    }
                }

            }
        },
        methods: {
            onReady (editor) {
                this.editorData = this.value
                // Insert the toolbar before the editable area.
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                )
                editor.plugins.get('FileRepository').createUploadAdapter = loader => {
                    // let val = editor.getData();
                    return {
                        upload: async () => {
                            // eslint-disable-next-line no-return-await
                            return await loader.file.then(f => {
                                const F = new FileReader()
                                F.readAsArrayBuffer(f)
                                // console.log(f)
                                return new Promise(resolve => {
                                    F.onload = function () {
                                        resolve({ bufAsArray: F.result, file: f })
                                    }
                                })
                            }).then(v => {
                                return UploadAdapter.upLoaderImg(v)// 使用上传的方法。file.file
                                // 返回标准格式
                                /* return {
                                    default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                                } */
                            })
                        }
                    }
                }
            },
            handleEditorDataChange (val) {
                this.editorData = val
            }
        },
        components: {
            // 编辑器组件的局部注册方式
            ckeditor: CKEditor.component
        }
    }
</script>

<style scoped>

</style>
